iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

30 天我與 Vue 的那些二三事系列 第 17

Day 17 - 專案實戰-記帳系統

  • 分享至 

  • xImage
  •  

前17天中,我們快速的Review了Vue的用法,緊接著開始我們的專案實戰囉! 這次要來實作的專案是記帳系統,當我們在寫專案時,最好先規畫相關的功能,並繪製一下架構圖,這樣的話將有助於我們整理脈絡。

以下就是本次要來實作的記帳系統的功能,要使用記帳系統,必須先有會員的資格,登入之後,可以瀏覽、新增、修改、刪除記帳資訊,除此之外,也擁有產生報表的功能,報表可以分類當月/當周/當季/當年的花費,並產生視覺化的圖表,並可以選擇是否寄出報表。

https://ithelp.ithome.com.tw/upload/images/20211002/201289252DSUAWDVv9.png

另外,由於我們本次專案也會使用到資料庫,因此,也需要想一下資料庫的欄位以及其關係。

由於這個專案還滿單純的,目前只需要要兩個資料表就足夠了。

第一個表是用來存放會員資訊的會員資料表,包含了會員的姓名、電話、帳戶、帳號、密碼,另外,也記錄了會員資料的建立以及更新時間,而owner則會去參考會員table的member_id欄位,這個欄位我們稱之為外鍵(Foreign Key,FK)。

第二個表是用來存放花費資訊的表格,包含了花費的名稱、花費的擁有人、分類以及更新及建立時間。

https://ithelp.ithome.com.tw/upload/images/20211002/20128925DM7bxroYZg.png

明天的文章中,我們會進行MSSQL Server的一些用法的教學。


Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#


上一篇
Day 16 - 透過Vuex來管理狀態
下一篇
Day 18 - MSSQL 基本 & 工具介紹
系列文
30 天我與 Vue 的那些二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言